<template>
	<view class="container">
		<view class="topContainer">
			<view class="topTitle">请假单</view>
			<view class="saveConatiner">
				<button class="saveLeaveBtn" @click="saveLeaveInfo()">保存</button>
			</view>
		</view>
		<view class="leaveTypeContainer">
			<view class="partSelectConatiner">
				<view class="leaveType">
					请假类型
				</view>
				<view class="selectTypeContainer" @tap="showModal" data-target="RadioModal">
					<view class="selectTypeText">
						{{leaveType}}
						<view class="rightHead">
							<view class="lg text-gray cuIcon-right , stateHeadImg"></view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="partSelectConatiner">
				<view class="leaveType">
					开始时间 *
				</view>
				<view class="selectTypeContainer" >
					<view class="selectTypeText"  @click="selectDatePicker(0)">
						{{startTime}}
						<view class="rightHead">
							<view class="lg text-gray cuIcon-right , stateHeadImg"></view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="partSelectConatiner">
				<view class="leaveType">
					结束时间 *
				</view>
				<view class="selectTypeContainer" @click="selectDatePicker(1)">
					<view class="selectTypeText">
						{{endTime}}
						<view class="rightHead">
							<view class="lg text-gray cuIcon-right , stateHeadImg"></view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="topContainer2">
			<view class="topTitle2">请假事由</view>
		</view>
		<view class="leaveReasonContainer">
			<textarea :placeholder="tixing" :maxlength='maxLength' class="textArea" @input="inputTextArea" :value="textAreaValue"></textarea>
			<view class="textLength"><text style="color: red;">{{currentLength}}</text>/<text>{{maxLength}}</text></view>
		</view>
		
		<view class="topContainer2">
			<view class="topTitle2">定位</view>
		</view>
		<view class="uoloadFileContainer">
			<!-- <view class="uploadFileContainer">
				<image src="../../static/icon/uploadFile.png" class="uploadImg" @click="pushHerd"></image>
				<view class="uploadContext">请选择文件</view>
			</view>
			<view class="lookText" @tap="toLookFile()">预览</view> -->
			
			<view class="uploadFileContainer">
				<image :src="locationImg" class="uploadImg" @click="getLocation()"></image>
				<view class="uploadContext">定位</view>
			</view>
			<view class="lookLocationText">{{location}}</view>
		</view>
		
		<view class="submitContainer">
			<button class="submitBtn" @click="submit()">
				立即提交
			</button>
		</view>
		<!--上传-->
		<l-file 
		    ref="lFile" 
		    @up-success="upSuccess"
		></l-file>
		<!-- 时间选择器 -->
		<DateTimePicker ref='date-time0' type='date' :startYear='2018' :endYear='2022' @change='dateTimeChange0'></DateTimePicker>
		<DateTimePicker ref='date-time1' type='date' :startYear='2018' :endYear='2022' @change='dateTimeChange1'></DateTimePicker>
		<!-- 事假类型弹出 -->
		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="RadioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in leaveTypeList" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{item.type}}</view>
								<radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
								 :value="item.type"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	import DateTimePicker from '../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
	import lFile from '../../components/l-file/l-file.vue'
	import { getDay } from '../utils/getDay.js'
	import { formatDate } from '../../common/format-data.js'
	import * as api from '../config/api.js'
	import { location , locationImg } from '../../data/data.js'
	export default {
		data(){
			return{
				modalName: null,
				radio: '',
				leaveTypeList:[
					{
						"id":1,
						"type":"少于三天",
						"leaveInfoType":0
					},{
						"id":2,
						"type":"超过三天少于一周",
						"leaveInfoType":1
					},{
						"id":3,
						"type":"超过一周",
						"leaveInfoType":2
					}
				],
				leaveType:"少于三天",
				startTime:formatDate(new Date()),
				endTime:formatDate(new Date()),
				currentLength:0,
				maxLength:100,
				tixing:"请输入请假理由(100字内)",
				textAreaValue:"",
				// 相差天数
				day:0,
				location:location,
				locationImg:locationImg
			}
		},
		components:{
			DateTimePicker,
			lFile
		},
		watch:{
			startTime:{
				handler(newVal,oldVal){
					let day = getDay(newVal,this.endTime) + 1;
					if(day == -1){
						uni.showToast({
							title:"请选择则正确的结束时间",
							icon:"none"
						})
						this.startTime = oldVal
					}else{
						this.day = day;
						// 动态变化时间
						if(day <= 3 && day >= 0){
							this.radio = 'radio0'
							this.leaveType = this.leaveTypeList[0].type
						}else if(day <= 7 && day >3){
							this.radio = 'radio1'
							this.leaveType = this.leaveTypeList[1].type
						}else if(day > 7 ){
							this.radio = 'radio2'
							this.leaveType = this.leaveTypeList[2].type
						}
					}
				},
			},
			// 监听时间选择变化
			endTime:{
				handler(newVal,oldVal){
					let day = getDay(this.startTime,newVal) +1;
					if(day == -1){
						uni.showToast({
							title:"请选择则正确的结束时间",
							icon:"none"
						})
						this.endTime = oldVal
					}else{
						this.day = day;
						// 动态变化时间
						if(day <= 3 && day >= 0){
							this.radio = 'radio0'
							this.leaveType = this.leaveTypeList[0].type
						}else if(day <= 7 && day >3){
							this.radio = 'radio1'
							this.leaveType = this.leaveTypeList[1].type
						}else if(day > 7 ){
							this.radio = 'radio2'
							this.leaveType = this.leaveTypeList[2].type
						}
					}
				},
			}
		},
		onLoad(option){
			this.$reoladUser();
			let that = this;
			// 这个id就是传递的假条信息的id 如果传递有数据就可以修改
			if(option.id != null){
				let id = option.id
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.on('obj', function(data) {
					let obj = data.obj
					that.transData(obj)
				})
			}
		},
		methods:{
			/**
			 * 修改数据
			 * @param {Object} obj传递对象
			 */
			transData(obj){
				console.log("获取的对象")
				console.log(obj)
				this.startTime = obj.leaveInfoStart
				this.endTime = obj.leaveInfoEnd
				this.textAreaValue = obj.leaveInfoReason
				this.currentLength = obj.leaveInfoReason.length
				this.location = obj.leaveInfoAffix
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange(e) {
				this.radio = e.detail.value
				this.leaveType = e.target.value
				console.log(e)
				this.modalName = null
			},
			getObj(){
				// 获取所有的数据
				// 用户Id
				let leaveUserNum = this.$store.getters.getLeaveUserNum
				// 请假类型
				let leaveType = this.leaveType
				let leaveInfoType = '';
				// 请假类型
				if(leaveType == '少于三天'){
					leaveInfoType = 0
				}else if(leaveType == '超过三天少于一周'){
					leaveInfoType = 1
				}else if(leaveType == '超过一周'){
					leaveInfoType = 2
				}
				
				// 开始时间
				let leaveInfoStart = this.startTime
				// 结束时间
				let leaveInfoEnd = this.endTime
				// 请假理由
				let leaveInfoReason = this.textAreaValue
				// 请假请求状态0 状态为保存时是5
				let leaveInfoStatus = 0;
				// 时间差
				let day = this.day
				// 当前位置
				let leaveInfoAffix = this.location
				
				let obj = {
					leaveInfoType:leaveInfoType,
					leaveInfoReason:leaveInfoReason,
					leaveInfoStart:leaveInfoStart,
					leaveInfoEnd:leaveInfoEnd,
					leaveInfoAffix:leaveInfoAffix,
					leaveUserNum:leaveUserNum,
					leaveInfoStatus:leaveInfoStatus
				}
				return obj;
			},
			saveLeaveInfo(){
				let obj = this.getObj();
				obj.leaveInfoStatus = 5
				api.keepFileApi({
					data:obj,
					success:res=>{
						console.log(res);
						if(res.code == 200){
							uni.showModal({
								content:"保存成功",
								success: function (res) {
									if (res.confirm) {
										uni.navigateBack()
									}
								}
							})
						}else{
							uni.showToast({
								title:"保存失败",
								icon:"none"
							})
						}
					},
					fail:err=>{
						uni.showToast({
							title:"网络延迟",
							icon:"none"
						})
					}
				})
				
			},
			selectDatePicker(id) {
				if(id == 0){
					this.$refs['date-time0'].show();
				}else if(id == 1){
					this.$refs['date-time1'].show();
				}
			},
			dateTimeChange0(value) {
				// console.log("开始时间:"+value)
				this.startTime = value
			},
			dateTimeChange1(value) {
				// console.log("结束时间:"+value)
				this.endTime = value
			},
			inputTextArea(e){
				let value = e.detail.value
				this.textAreaValue = value
				this.currentLength = value.length
			},
			pushHerd(){
				console.log("sss")
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					// nvue页面使用时请查阅nvue获取当前webview的api，当前示例为vue窗口
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif
					//非真实地址，记得更换,调试时ios有跨域，需要后端开启跨域并且接口地址不要使用http://localhost/
					url: 'http://42.192.137.173:10010/api/upload/image',
					//默认file,上传文件的key
					name: 'file',
					// header: {'Authorization':'token'},
					//...其他参数
				});
			},
			upSuccess(res){
				console.log("上传成功")
				console.log(res);
			},
			toLookFile(){
				console.log(this.location)
				// 上传之后获取文件地址
				console.log("预览文件")
				// let url = 'http://42.192.137.173:10010/api/upload/image'
				// this.$refs.lFile.download(url).then(path=>{
				// 	this.$refs.lFile.open(path);
				// });
			},
			getLocation(){
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode:true,
					success: function(res) {
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						let province = res.address.province
						let city = res.address.city
						let district = res.address.district
						let street = res.address.street
						location = province + '-' + city + '-' + district + '-' + street
						// console.log(location)
						that.location = location
					},
					fail:function(err){
						console.log("定位失败")
					}
				});
			},
			async submit(){
				let obj = this.getObj();
				// 修改是提交还是保存
				obj.leaveInfoStatus = 0
				// console.log(obj)
				api.applyApi({
					data:obj,
					success:res=>{
						console.log(res)
						if(res.code == 200){
							uni.showToast({
								title:"提交成功",
								icon:"none",
								success(res){
									uni.navigateBack()
								}
							})
						}else if(res.code == 500){
							uni.showToast({
								title:"新增失败,存在已审批且未销假的记录",
								icon:"none"
							})
						}else{
							uni.showToast({
								title:"提交失败",
								icon:"none"
							})
						}
					},
					fail:err=>{
						uni.showToast({
							title:"网络延迟",
							icon:"none"
						})
					}
				})
			},
			
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
	}
	.topContainer{
		width: 100%;
		height: 85upx;
		background-color: white;
		padding-top: 30upx;
		display: flex;
		position: relative;
	}
	.topTitle{
		height: 50upx;
		font-size: 32upx;
		font-weight: 600;
		margin-left: 60upx;
	}
	.saveConatiner{
		width: 100upx;
		height: 50upx;
		position: absolute;
		right: 80upx;
	}
	.saveLeaveBtn{
		width: 130upx;
		height: 50upx;
		line-height: 50upx;
		font-weight: 500;
		font-size: 28upx;
		background-color: rgba(115, 193, 220, 1.0);
	}
	.leaveTypeContainer{
		width: 100%;
		/* height: 110upx; */
		background-color: white;
		padding: 10upx 30upx 20upx 30upx;
		/* margin-top: 20upx; */
	}
	.partSelectConatiner{
		width: 100%;
		height: 80upx;
		background-color: white;
		display: flex;
		/* padding: 10upx 30upx 20upx 30upx; */
		padding: 10upx 20upx 10upx 30upx;
		border-bottom: 1px solid rgba(240,240,240,1);
	}
	.partSelectConatiner:last-child{
		border-bottom: 0;
		padding: 10upx 20upx 10upx 30upx;
	}
	.leaveType{
		float: left;
		width: 40%;
		height: 60upx;
		font-size: 30upx;
		line-height: 60upx;
		color: gray;
	}
	.selectTypeContainer{
		width: 60%;
	}
	.selectTypeText{
		float: right;
		font-size: 30upx;
		display: flex;
		height: 60upx;
		line-height: 60upx;
	}
	.rightHead{
		margin-left: 20upx;
		font-size: 35upx;
	}
	.topContainer2{
		margin-top: 20upx;
		width: 100%;
		height: 85upx;
		background-color: white;
		padding-top: 20upx;
		display: flex;
		position: relative;
	}
	.topTitle2{
		height: 50upx;
		font-size: 32upx;
		font-weight: 600;
		margin-left: 60upx;
	}
	.leaveReasonContainer{
		width: 100%;
		height: 210upx;
		background-color: white;
		padding: 10upx 30upx 20upx 30upx;
		position: relative;
	}
	.textArea{
		width: 100%;
		height: 170upx;
		font-size: 30upx;
		color: rgba(123,123,123,1);
	}
	.textLength{
		height: 10upx;
		position: absolute;
		right: 20upx;
		font-size: 26upx;
	}
	.uoloadFileContainer{
		width: 100%;
		height: 150upx;
		background-color: white;
		padding: 10upx 30upx 40upx 30upx;
		display: flex;
	}
	.uploadFileContainer{
		width:130upx;
		height: 100upx;
		text-align: center;
	}
	.uploadImg{
		width: 80upx;
		height: 80upx;
		margin-left: auto;
		margin-right: auto;
	}
	.uploadContext{
		width: 130upx;
		height: 80upx;
		margin-left: 40upx;
		font-size: 25upx;
		font-weight: 400;
		color: gray;
		margin-left: auto;
		margin-right: auto;
	}
	.lookText{
		width: 80upx;
		height: 80upx;
		text-decoration:underline;
		color: blue;
		font-size: 40upx;
		margin-left: 10%;
		margin-top: 80upx;
	}
	.lookLocationText{
		height: 80upx;
		color: black;
		font-size: 32upx;
		margin-top: 20upx;
	}
	.submitContainer{
		width: 100%;
		height: 200upx;
		margin-top: 60upx;
		/* background-color: pink; */
	}
	.submitBtn{
		background-color: rgba(70,148,255,1);
		width: 80%;
		font-size: 40upx;
		color: white;
	}
</style>
